
/*-------------------------
	The clocks
--------------------------*/


#clock{
	width:100%;
	position:relative;
	overflow: hidden;
	border: 1.5px lightgray solid;
	z-index: 1;
	/*padding: 10px 5px;*/
	padding: 0.625rem 0.3125rem;
}

#clock .display{
	text-align:center;
	padding-left: 0px;
	padding-right: 0px;
	border-radius: 3px;
	position:relative;
	/* height: 54px; */
	height: 3.375rem;
}


/*-------------------------
	Light color theme
--------------------------*/


#clock.light{
	background-color: #FAFAFA;
	color:#272e38;
}

#clock.light:after{
	/*box-shadow:0 4px 10px rgba(0,0,0,0.15);*/
	box-shadow:0 0.25rem 0.625rem rgba(0,0,0,0.15);
}

#clock.light .digits div span{
	background-color:#272e38;
	border-color:#272e38;
}

#clock.light .digits div.dots:before,
#clock.light .digits div.dots:after{
	background-color:#272e38;
}

#clock.light .display{
	border: lightgray 1px solid;
	background-image: linear-gradient(180deg, #a1c4fd 0%, #017bce 100%);
	/*height: 100px;*/
	height: 6.25rem;
}


/*-------------------------
	Dark color theme
--------------------------*/


#clock.dark{
	background-color: #017BCE;
	color:#cacaca;
	border: 3px white solid;
}

#clock.dark:after{
	/* box-shadow:0 4px 10px rgba(0,0,0,0.3); */
}

#clock.dark .digits div span{
	background-color:#cacaca;
	border-color:#cacaca;
}

#clock.dark .display{
	/* height: 100px; */
	height: 6.25rem;
}

#clock.dark .digits div.dots:before,
#clock.dark .digits div.dots:after{
	background-color:#cacaca;
}


/*-------------------------
	The Digits
--------------------------*/
#clock .digits {
	position:absolute;
	width: 100%;
	/*top: 45px;*/
	top: 2.8125rem;
}

#clock .digits div{
	text-align:left;
	position:relative;
	display:inline-block;

	/*width: 18px;
	height:36px;
	margin:0 3px;*/
	width: 1.125rem;
	height:2.25rem;
	margin:0 0.1875rem;
}

#clock .digits div span{
	opacity:0;
	position:absolute;

	-webkit-transition:0.25s;
	-moz-transition:0.25s;
	transition:0.25s;
}

#clock .digits div span:before,
#clock .digits div span:after{
	content:'';
	position:absolute;
	width:0;
	height:0;
	/*border:5px solid transparent;*/
	border:0.3125rem solid transparent;
}
/*
#clock .digits .d1{			height:5px;width:8px;top:0;left:5px;}
#clock .digits .d1:before{	border-width:0 5px 5px 0;border-right-color:inherit;left:-5px;}
#clock .digits .d1:after{	border-width:0 0 5px 5px;border-left-color:inherit;right:-5px;}

#clock .digits .d2{			height:5px;width:8px;top:16px;left:5px;}
#clock .digits .d2:before{	border-width:3px 4px 2px;border-right-color:inherit;left:-8px;}
#clock .digits .d2:after{	border-width:3px 4px 2px;border-left-color:inherit;right:-8px;}

#clock .digits .d3{			height:5px;width:8px;top:33px;left:5px;}
#clock .digits .d3:before{	border-width:5px 5px 0 0;border-right-color:inherit;left:-5px;}
#clock .digits .d3:after{	border-width:5px 0 0 5px;border-left-color:inherit;right:-5px;}

#clock .digits .d4{			width:5px;height:7px;top:7px;left:0;}
#clock .digits .d4:before{	border-width:0 5px 5px 0;border-bottom-color:inherit;top:-5px;}
#clock .digits .d4:after{	border-width:0 0 5px 5px;border-left-color:inherit;bottom:-5px;}

#clock .digits .d5{			width:5px;height:7px;top:7px;right:0;}
#clock .digits .d5:before{	border-width:0 0 5px 5px;border-bottom-color:inherit;top:-5px;}
#clock .digits .d5:after{	border-width:5px 0 0 5px;border-top-color:inherit;bottom:-5px;}

#clock .digits .d6{			width:5px;height:7px;top:24px;left:0;}
#clock .digits .d6:before{	border-width:0 5px 5px 0;border-bottom-color:inherit;top:-5px;}
#clock .digits .d6:after{	border-width:0 0 5px 5px;border-left-color:inherit;bottom:-5px;}

#clock .digits .d7{			width:5px;height:7px;top:24px;right:0;}
#clock .digits .d7:before{	border-width:0 0 5px 5px;border-bottom-color:inherit;top:-5px;}
#clock .digits .d7:after{	border-width:5px 0 0 5px;border-top-color:inherit;bottom:-5px;}
*/

#clock .digits .d1{			height:0.3125rem;width:0.5rem;top:0;left:0.3125rem;}
#clock .digits .d1:before{	border-width:0 0.3125rem 0.3125rem 0;border-right-color:inherit;left:-0.3125rem;}
#clock .digits .d1:after{	border-width:0 0 0.3125rem 0.3125rem;border-left-color:inherit;right:-0.3125rem;}

#clock .digits .d2{			height:0.3125rem;width:0.5rem;top:1rem;left:0.3125rem;}
#clock .digits .d2:before{	border-width:0.1875rem 0.25rem 0.125rem;border-right-color:inherit;left:-0.5rem;}
#clock .digits .d2:after{	border-width:0.1875rem 0.25rem 0.125rem;border-left-color:inherit;right:-0.5rem;}

#clock .digits .d3{			height:0.3125rem;width:0.5rem;top:2.0625rem;left:0.3125rem;}
#clock .digits .d3:before{	border-width:0.3125rem 0.3125rem 0 0;border-right-color:inherit;left:-0.3125rem;}
#clock .digits .d3:after{	border-width:0.3125rem 0 0 0.3125rem;border-left-color:inherit;right:-0.3125rem;}

#clock .digits .d4{			width:0.3125rem;height:0.4375rem;top:0.4375rem;left:0;}
#clock .digits .d4:before{	border-width:0 0.3125rem 0.3125rem 0;border-bottom-color:inherit;top:-0.3125rem;}
#clock .digits .d4:after{	border-width:0 0 0.3125rem 0.3125rem;border-left-color:inherit;bottom:-0.3125rem;}

#clock .digits .d5{			width:0.3125rem;height:0.4375rem;top:0.4375rem;right:0;}
#clock .digits .d5:before{	border-width:0 0 0.3125rem 0.3125rem;border-bottom-color:inherit;top:-0.3125rem;}
#clock .digits .d5:after{	border-width:0.3125rem 0 0 0.3125rem;border-top-color:inherit;bottom:-0.3125rem;}

#clock .digits .d6{			width:0.3125rem;height:0.4375rem;top:1.5rem;left:0;}
#clock .digits .d6:before{	border-width:0 0.3125rem 0.3125rem 0;border-bottom-color:inherit;top:-0.3125rem;}
#clock .digits .d6:after{	border-width:0 0 0.3125rem 0.3125rem;border-left-color:inherit;bottom:-0.3125rem;}

#clock .digits .d7{			width:0.3125rem;height:0.4375rem;top:1.5rem;right:0;}
#clock .digits .d7:before{	border-width:0 0 0.3125rem 0.3125rem;border-bottom-color:inherit;top:-0.3125rem;}
#clock .digits .d7:after{	border-width:0.3125rem 0 0 0.3125rem;border-top-color:inherit;bottom:-0.3125rem;}


/* 1 */

#clock .digits div.one .d5,
#clock .digits div.one .d7{
	opacity:1;
}

/* 2 */

#clock .digits div.two .d1,
#clock .digits div.two .d5,
#clock .digits div.two .d2,
#clock .digits div.two .d6,
#clock .digits div.two .d3{
	opacity:1;
}

/* 3 */

#clock .digits div.three .d1,
#clock .digits div.three .d5,
#clock .digits div.three .d2,
#clock .digits div.three .d7,
#clock .digits div.three .d3{
	opacity:1;
}

/* 4 */

#clock .digits div.four .d5,
#clock .digits div.four .d2,
#clock .digits div.four .d4,
#clock .digits div.four .d7{
	opacity:1;
}

/* 5 */

#clock .digits div.five .d1,
#clock .digits div.five .d2,
#clock .digits div.five .d4,
#clock .digits div.five .d3,
#clock .digits div.five .d7{
	opacity:1;
}

/* 6 */

#clock .digits div.six .d1,
#clock .digits div.six .d2,
#clock .digits div.six .d4,
#clock .digits div.six .d3,
#clock .digits div.six .d6,
#clock .digits div.six .d7{
	opacity:1;
}


/* 7 */

#clock .digits div.seven .d1,
#clock .digits div.seven .d5,
#clock .digits div.seven .d7{
	opacity:1;
}

/* 8 */

#clock .digits div.eight .d1,
#clock .digits div.eight .d2,
#clock .digits div.eight .d3,
#clock .digits div.eight .d4,
#clock .digits div.eight .d5,
#clock .digits div.eight .d6,
#clock .digits div.eight .d7{
	opacity:1;
}

/* 9 */

#clock .digits div.nine .d1,
#clock .digits div.nine .d2,
#clock .digits div.nine .d3,
#clock .digits div.nine .d4,
#clock .digits div.nine .d5,
#clock .digits div.nine .d7{
	opacity:1;
}

/* 0 */

#clock .digits div.zero .d1,
#clock .digits div.zero .d3,
#clock .digits div.zero .d4,
#clock .digits div.zero .d5,
#clock .digits div.zero .d6,
#clock .digits div.zero .d7{
	opacity:1;
}


/* The dots */

#clock .digits div.dots{
	/*width:5px;*/
	width:0.3125rem;
}

#clock .digits div.dots:before,
#clock .digits div.dots:after{
	content:'';
	position:absolute;
	left:0;
	/*width:5px;
	height:5px;
	top:8px;*/
	width:0.3125rem;
	height:0.3125rem;
	top:0.5rem;
}

#clock .digits div.dots:after{
	/*top:26px;*/
	top:1.625rem;
}


/*-------------------------
	date
--------------------------*/
#clock .date{
	position:absolute;
	width:100%;
	top: 0;
	left:0;
	text-align:center;
	color: white;
	/*line-height: 20px;
	font-size: 15px;*/
	line-height: 1.25rem;
	font-size: 0.9375rem;
}

#clock .week{
	position:absolute;
	width:100%;
	left: 0%;
	text-align:center;
	color: white;
	line-height: initial;
	/*font-size:15px;
	top:20px;*/
	top:1.25rem;
	font-size:0.9375rem;
}
